<template>
    <div style="width: 1100px;overflow: auto">
        <el-row type="flex" justify="space-between" class="mb-10">
            <span>Vesset:{{ info.shipName }}</span>
            <span>VoyNo:{{ info.voyage }}</span>
            <span>Nationlity:PRC</span>
            <span>Port of loading:{{ info.portName }}</span>
            <span>Loading completed on:{{ info.taskTime }}</span>
        </el-row>
        <div style="display: flex;flex-direction: column-reverse">
            <div v-for="(row,r) in maxRow" class="print-flex stowage-row stowage-reverse">
                <div v-for="(bay,b) in row" class="stowage-bay" v-if="b%2===0">
                    <div v-for="(tier,t) in bay" class="stowage-tier" style="position: relative">
                        <div v-if="tier.bayNo%2!==0" class="">
                            <div v-show="tier.containerId">{{ tier.containerId }}</div>
                            <div v-show="tier.containerId">{{ tier.ef }}/{{ tier.containerType }}</div>
                        </div>
                        <div v-else class="stowage-even" :style="'display:'+tier.style">
                            <div v-show="tier.containerId">{{ tier.containerId }}</div>
                            <div v-show="tier.containerId">{{ tier.ef }}/{{ tier.containerType }}</div>
                        </div>

                        <!--<div v-show="tier.containerId">{{ tier.containerId }}</div>-->
                        <!--<div v-show="tier.containerId">{{ tier.ef }}/{{ tier.containerType }}</div>-->
                        <div v-show="r===0&&t===0" class="stowage-no">
                            {{ b+1 }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-20">
            <span>Actual Total: 外贸  {{ form.size2 }}*20F  {{ form.size4 }}*40F</span>
            <div>Remark:{{ form.remark }}</div>
        </div>
    </div>
</template>

<script>
    import { getStowage, getShipPlanId } from "@/api/shipPlan/shipPlan";
    import { setCookie, Token } from '@/utils/cookie'

    export default {
        name: "stowage",
        data() {
            return {
                id: '',
                table: [],
                maxRow: 0,
                maxBay: 0,
                maxTier: 0,
                form: {},
                info: {},
            }
        },
        created() {
            const token = this.$route.query.token
            setCookie(Token, token)
        },
        mounted() {
            setTimeout(() => {
                this.loadData()
            }, 1000)
        },
        methods: {
            loadData() {
                this.id = this.$route.query.id
                getShipPlanId(this.id).then(text => {
                    this.info = text.data
                    getStowage(this.id).then(res => {
                        this.table = res.data.container
                        this.form = res.data
                        let get = {
                            maxRow: res.data.maxRow,
                            maxBay: res.data.maxBay,
                            maxTier: res.data.maxTier,
                        }
                        let tier = [];
                        for (let i = 0; i < get.maxRow; i++) {
                            tier.push({
                                containerNo: "",
                                type: ""
                            });
                        }
                        let bay = [];
                        for (let i = 0; i < get.maxBay + 1; i++) {
                            bay.push(tier);
                        }
                        let row = [];
                        for (let i = 0; i < get.maxTier; i++) {
                            row.push(bay);
                        }
                        this.maxRow = JSON.parse(JSON.stringify(row))
                        let newBay = res.data.container;
                        for (let i = 0; i < newBay.length; i++) {
                            if (newBay[i].bayNo % 2 === 0) {
                                this.maxRow[Number(newBay[i].tierNo - 1)][Number(newBay[i].bayNo)]
                                    .splice(
                                        newBay[i].rowNo - 1,
                                        1,
                                        {
                                            containerId: newBay[i].containerId,
                                            containerType: newBay[i].containerType,
                                            ef: newBay[i].ef,
                                            bayNo: Number(newBay[i].bayNo),
                                        }
                                    );
                                this.maxRow[Number(newBay[i].tierNo - 1)][Number(newBay[i].bayNo) + 1]
                                    .splice(
                                        newBay[i].rowNo - 1,
                                        1,
                                        {
                                            containerId: newBay[i].containerId,
                                            containerType: newBay[i].containerType,
                                            ef: newBay[i].ef,
                                            bayNo: Number(newBay[i].bayNo),
                                            style: "none"
                                        }
                                    );
                                console.log(newBay[i].tierNo - 1)
                                console.log(newBay[i].bayNo - 1)
                                console.log(newBay[i].rowNo - 1)
                                console.log(this.maxRow)
                                console.log(this.maxRow[Number(newBay[i].tierNo - 1)][Number(newBay[i].bayNo) - 1][newBay[i].rowNo - 1])
                                console.log(this.maxRow[Number(newBay[i].tierNo - 1)][Number(newBay[i].bayNo) + 1][newBay[i].rowNo - 1])
                            } else {
                                console.log(newBay[i]);
                                console.log(newBay[i].rowNo);
                                this.maxRow[Number(newBay[i].tierNo - 1)][Number(newBay[i].bayNo) - 1]
                                    .splice(
                                        newBay[i].rowNo - 1,
                                        1,
                                        {
                                            containerId: newBay[i].containerId,
                                            containerType: newBay[i].containerType,
                                            ef: newBay[i].ef,
                                            bayNo: Number(newBay[i].bayNo)
                                        }
                                    );
                            }
                        }
                        // console.log(this.maxRow)
                        window.print()
                        window.close()
                    })
                })
            },
            handlePrint() {
                console.log('打印')
            }
        },
        filters: {
            odd(index) {
                let newVal = index + 1;
                let val = newVal + index
                if (val < 10) {
                    return "0" + val;
                } else {
                    return val;
                }
            },
        }
    }
</script>

<style scoped>
    .stowage-row {
        margin-bottom: 10px;
        border-left: 1px solid;
    }

    .stowage-reverse {
        justify-content: flex-end;
        flex-direction: row-reverse;
    }

    .stowage-bay {
        width: 75px;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        border-top: 1px solid;
    }

    .stowage-tier {
        border-bottom: 1px solid;
        border-right: 1px solid;
        height: 35px;
        font-size: 8px;
        text-align: center;
        min-width: 75px;
    }

    .stowage-no {
        position: absolute;
        top: 50px;
        left: 30px;
        transform: translate(-50%, -50%);
    }

    .stowage-even {
        min-width: 146px;
        position: relative;
        z-index: 88;
        background: #fff;
        height: 35px;
        left: 1px;
    }
</style>
